<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		/* CSS reset */
		*,
		*::after,
		*::before {
			box-sizing: inherit;
			margin: 0;
			padding: 0;
		}

		html { font-size: 62.5%; }

		body {
			box-sizing: border-box;
			font-family: 'Open Sans', sans-serif;
			position: relative;
		}

		/* Typography =======================*/

		/* Headings */

		/* Main heading for card's front cover */
		.card-front__heading {
			font-size: 1.5rem;
			margin-top: .25rem;
		}

		/* Main heading for inside page */
		.inside-page__heading {
			padding-bottom: 1rem;
			width: 100%;
		}

		/* Mixed */

		/* For both inside page's main heading and 'view me' text on card front cover */
		.inside-page__heading,
		.card-front__text-view {
			font-size: 1.3rem;
			font-weight: 800;
			margin-top: .2rem;
		}

		.inside-page__heading--city,
		.card-front__text-view--city { color: #ff62b2; }

		.inside-page__heading--ski,
		.card-front__text-view--ski { color: #2aaac1; }

		.inside-page__heading--beach,
		.card-front__text-view--beach { color: #fa7f67; }

		.inside-page__heading--camping,
		.card-front__text-view--camping { color: #00b97c; }

		/* Front cover */

		.card-front__tp { color: #fafbfa; }

		/* For pricing text on card front cover */
		.card-front__text-price {
			font-size: 1.2rem;
			margin-top: -.2rem;
		}

		/* Back cover */

		/* For inside page's body text */
		.inside-page__text {
			color: #333;
		}

		/* Icons ===========================================*/

		.card-front__icon {
			fill: #fafbfa;
			font-size: 3vw;
			height: 3.25rem;
			margin-top: -.5rem;
			width: 3.25rem;
		}

		/* Buttons =================================================*/

		.inside-page__btn {
			background-color: transparent;
			border: 3px solid;
			border-radius: .5rem;
			font-size: 1.2rem;
			font-weight: 600;
			margin-top: 2rem;
			overflow: hidden;
			padding: .7rem .75rem;
			position: relative;
			text-decoration: none;
			transition: all .3s ease;
			width: 90%;
			z-index: 10;
		}

		.inside-page__btn::before {
			content: "";
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			transform: scaleY(0);
			transition: all .3s ease;
			width: 100%;
			z-index: -1;
		}

		.inside-page__btn--city {
			border-color: #ff40a1;
			color: #ff40a1;
		}

		.inside-page__btn--city::before {
			background-color: #ff40a1;
		}

		.inside-page__btn--ski {
			border-color: #279eb2;
			color: #279eb2;
		}

		.inside-page__btn--ski::before {
			background-color: #279eb2;
		}

		.inside-page__btn--beach {
			border-color: #fa7f67;
			color: #fa7f67;
		}

		.inside-page__btn--beach::before {
			background-color: #fa7f67;
		}

		.inside-page__btn--camping {
			border-color: #00b97d;
			color: #00b97d;
		}

		.inside-page__btn--camping::before {
			background-color: #00b97d;
		}

		.inside-page__btn:hover {
			color: #fafbfa;
		}

		.inside-page__btn:hover::before {
			transform: scaleY(1);
		}

		/* Layout Structure=========================================*/

		.main {
			background: linear-gradient(
					to bottom right,
					#eee8dd,
					#e3d9c6
			);
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 100vh;
			width: 100%;
		}

		/* Container to hold all cards in one place */
		.card-area {
			align-items: center;
			display: flex;
			flex-wrap: nowrap;
			height: 100%;
			justify-content: space-evenly;
			padding: 1rem;
		}

		/* Card ============================================*/

		/* Area to hold an individual card */
		.card-section {
			align-items: center;
			display: flex;
			height: 100%;
			justify-content: center;
			width: 100%;
		}

		/* A container to hold the flip card and the inside page */
		.card {
			background-color: rgba(0,0,0, .05);
			box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.5);
			height: 15rem;
			position: relative;
			transition: all 1s ease;
			width: 15rem;
		}

		/* Flip card - covering both the front and inside front page */

		/* An outer container to hold the flip card. This excludes the inside page */
		.flip-card {
			height: 15rem;
			perspective: 100rem;
			position: absolute;
			right: 0;
			transition: all 1s ease;
			visibility: hidden;
			width: 15rem;
			z-index: 100;
		}

		/* The outer container's visibility is set to hidden. This is to make everything within the container NOT set to hidden  */
		/* This is done so content in the inside page can be selected */
		.flip-card > * {
			visibility: visible;
		}

		/* An inner container to hold the flip card. This excludes the inside page */
		.flip-card__container {
			height: 100%;
			position: absolute;
			right: 0;
			transform-origin: left;
			transform-style: preserve-3d;
			transition: all 1s ease;
			width: 100%;
		}

		.card-front,
		.card-back {
			backface-visibility: hidden;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}

		/* Styling for the front side of the flip card */

		/* container for the front side */
		.card-front {
			background-color: #fafbfa;
			height: 15rem;
			width: 15rem;
		}

		/* Front side's top section */
		.card-front__tp {
			align-items: center;
			clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
			display: flex;
			flex-direction: column;
			height: 12rem;
			justify-content: center;
			padding: .75rem;
		}

		.card-front__tp--city {
			background: linear-gradient(
					to bottom,
					#ff73b9,
					#ff40a1
			);
		}

		.card-front__tp--ski {
			background: linear-gradient(
					to bottom,
					#47c2d7,
					#279eb2
			);
		}

		.card-front__tp--beach {
			background: linear-gradient(
					to bottom,
					#fb9b88,
					#f86647
			);
		}

		.card-front__tp--camping {
			background: linear-gradient(
					to bottom,
					#00db93,
					#00b97d
			);
		}

		/* Front card's bottom section */
		.card-front__bt {
			align-items: center;
			display: flex;
			justify-content: center;
		}

		/* Styling for the back side of the flip card */

		.card-back {
			background-color: #fafbfa;
			transform: rotateY(180deg);
		}

		/* Specifically targeting the <video> element */
		.video__container {
			clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%);
			height: auto;
			min-height: 100%;
			object-fit: cover;
			width: 100%;
		}

		/* Inside page */

		.inside-page {
			background-color: #fafbfa;
			box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0,0,0,0.25);
			height: 100%;
			padding: 1rem;
			position: absolute;
			right: 0;
			transition: all 1s ease;
			width: 15rem;
			z-index: 1;
		}

		.inside-page__container {
			align-items: center;
			display: flex;
			flex-direction: column;
			height: 100%;
			text-align: center;
			width: 100%;
		}

		/* Functionality ====================================*/

		/* This is to keep the card centered (within its container) when opened */
		.card:hover {
			box-shadow:
					-.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.75);
			width: 30rem;
		}

		/* When the card is hovered, the flip card container will rotate */
		.card:hover .flip-card__container {
			transform: rotateY(-180deg);
		}

		/* When the card is hovered, the shadow on the inside page will shrink to the left */
		.card:hover .inside-page {
			box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0,0,0,0.1);
		}

		/* Footer ====================================*/

		.footer {
			background-color: #333;
			margin-top: 3rem;
			padding: 1rem 0;
			width: 100%;
		}

		.footer-text {
			color: #fff;
			font-size: 1.2rem;
			text-align: center;
		}
	</style>

</head>
<body>
<main class="main">

	<section class="card-area">

		<!-- Card: City -->
		<section class="card-section">
			<div class="card">
				<div class="flip-card">
					<div class="flip-card__container">
						<div class="card-front">
							<div class="card-front__tp card-front__tp--city">
								<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
									 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" class="card-front__icon">
                               <g>
                                   <path d="M49.7,22c-1.1,0-2,0.9-2,2v32.2c0,1.1,0.9,2,2,2s2-0.9,2-2V24C51.7,22.9,50.8,22,49.7,22z"/>
								   <path d="M13,29.5c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7v-3h20.8c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7v-3h20.8c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7
                                       V7.1h24.8v15.3c0,1.1,0.9,2,2,2s2-0.9,2-2V5.1c0-1.1-0.9-2-2-2H3.7c-1.1,0-2,0.9-2,2v51c0,1.1,0.9,2,2,2s2-0.9,2-2V36.5H13
                                       c1.1,0,2-0.9,2-2s-0.9-2-2-2H5.7v-3H13z"/>
								   <path d="M58,11.9c0-0.1,0-0.1,0-0.2c0-0.1,0-0.1-0.1-0.2c0-0.1,0-0.1-0.1-0.2c0-0.1-0.1-0.1-0.1-0.2c0,0,0-0.1-0.1-0.1c0,0,0,0,0,0
                                       c0-0.1-0.1-0.1-0.1-0.2c0,0-0.1-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c0,0-0.1-0.1-0.2-0.1
                                       c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.2,0c0,0,0,0,0,0
                                       c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1l-12.6,7.8
                                       c0,0,0,0,0,0c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.1c0,0-0.1,0.1-0.1,0.2c0,0.1-0.1,0.1-0.1,0.2
                                       c0,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.1-0.1,0.2c0,0.1,0,0.1-0.1,0.2c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2c0,0,0,0,0,0v5.4H22.1
                                       c-1.1,0-2,0.9-2,2v28.9c0,1.1,0.9,2,2,2s2-0.9,2-2V29.3h17.3v26.9c0,1.1,0.9,2,2,2s2-0.9,2-2V21l8.6-5.3v40.5c0,1.1,0.9,2,2,2
                                       s2-0.9,2-2V12.1C58,12,58,12,58,11.9z"/>
								   <path d="M28,31L28,31c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S29.1,31,28,31z"/>
								   <path d="M33.5,31L33.5,31c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S34.6,31,33.5,31z"/>
								   <path d="M28,36L28,36c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S29.1,36,28,36z"/>
								   <path d="M33.5,36L33.5,36c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S34.6,36,33.5,36z"/>
                               </g>
                               </svg>

								<h2 class="card-front__heading">
									City break
								</h2>
								<p class="card-front__text-price">
									From £29
								</p>
							</div>

							<div class="card-front__bt">
								<p class="card-front__text-view card-front__text-view--city">
									View me
								</p>
							</div>
						</div>
						<div class="card-back">
							<video class="video__container" autoplay muted loop>
								<source class="video__media" src="https://player.vimeo.com/external/370331493.sd.mp4?s=e90dcaba73c19e0e36f03406b47bbd6992dd6c1c&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
							</video>
						</div>
					</div>
				</div>

				<div class="inside-page">
					<div class="inside-page__container">
						<h3 class="inside-page__heading inside-page__heading--city">
							For urban lovers
						</h3>
						<p class="inside-page__text">
							As cities never sleep, there are always something going on, no matter what time!
						</p>
						<a href="#" class="inside-page__btn inside-page__btn--city">View deals</a>
					</div>
				</div>
			</div>
		</section>

		<!-- Card: Ski -->
		<section class="card-section">
			<div class="card">
				<div class="flip-card">
					<div class="flip-card__container">
						<div class="card-front">
							<div class="card-front__tp card-front__tp--ski">
								<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
									 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" class="card-front__icon">
                               <g>
                                   <path d="M58.8,54.5L38.5,19.3c-0.4-0.6-1-1-1.7-1s-1.4,0.4-1.7,1L14.8,54.5c-0.4,0.6-0.4,1.4,0,2c0.4,0.6,1,1,1.7,1h40.6
                                       c0.7,0,1.4-0.4,1.7-1C59.2,55.9,59.2,55.1,58.8,54.5z M36.8,24.3l5.8,10c-0.5-0.2-1.1-0.3-1.7-0.3c-2.5,0-3.7,1.5-4.6,2.5
                                       c-0.7,0.9-1,1.1-1.5,1.1s-0.8-0.2-1.5-1.1c-0.6-0.7-1.3-1.5-2.4-2.1L36.8,24.3z M20,53.5l8.9-15.4c0.5,0,0.7,0.3,1.4,1.1
                                       c0.8,1,2.1,2.5,4.6,2.5s3.7-1.5,4.6-2.5c0.7-0.9,1-1.1,1.5-1.1c0.5,0,0.8,0.2,1.5,1.1c0.8,1,2.1,2.5,4.5,2.5l6.8,11.8H20z"/>
								   <path d="M14.7,51.5c1.1,0,2-0.9,2-2s-0.9-2-2-2H6.4l9.1-15.7c0.6,0.6,1.5,1.3,2.9,1.3c1.8,0,2.8-1.2,3.3-1.8
                                       c0.1-0.1,0.2-0.2,0.3-0.3c0.1,0.1,0.2,0.2,0.3,0.3c0.5,0.6,1.5,1.8,3.3,1.8c1.1,0,2-0.9,2-2c0-1.1-0.9-2-1.9-2
                                       c-0.1-0.1-0.2-0.2-0.3-0.4c-0.5-0.6-1.5-1.8-3.3-1.8c-1.8,0-2.8,1.2-3.3,1.8c-0.1,0.1-0.2,0.2-0.3,0.3c-0.1-0.1-0.2-0.2-0.3-0.3
                                       c-0.1-0.2-0.3-0.4-0.5-0.6l5.7-9.9l3.8,6.6c0.6,1,1.8,1.3,2.7,0.7c1-0.6,1.3-1.8,0.7-2.7L25,13.2c-0.4-0.6-1-1-1.7-1
                                       s-1.4,0.4-1.7,1l-8.4,14.5c-0.1,0.1-0.2,0.3-0.3,0.4L1.2,48.5c0,0,0,0.1,0,0.1c0,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.1-0.1,0.2
                                       c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2c0,0,0,0.1,0,0.1c0,0,0,0,0,0.1c0,0.1,0,0.1,0,0.2c0,0.1,0,0.1,0,0.2C1,50,1,50,1,50.1
                                       c0,0.1,0,0.1,0.1,0.2c0,0.1,0.1,0.1,0.1,0.2c0,0.1,0.1,0.1,0.1,0.2c0,0.1,0.1,0.1,0.1,0.2c0,0,0.1,0.1,0.1,0.1c0,0,0.1,0.1,0.1,0.1
                                       c0.1,0,0.1,0.1,0.2,0.1c0,0,0,0,0.1,0c0,0,0.1,0,0.1,0c0.1,0.1,0.2,0.1,0.3,0.1c0,0,0.1,0,0.1,0c0.1,0,0.3,0.1,0.5,0.1c0,0,0,0,0,0
                                       c0,0,0,0,0,0c0,0,0,0,0,0H14.7z"/>
								   <path d="M40.7,12.3h3.1l-2.2,2.2c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l2.2-2.2v3.1
                                       c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5v-3.1l2.2,2.2c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1l-2.2-2.2h3.1
                                       c0.8,0,1.5-0.7,1.5-1.5s-0.7-1.5-1.5-1.5h-3.1l2.2-2.2c0.6-0.6,0.6-1.5,0-2.1c-0.6-0.6-1.5-0.6-2.1,0L49,7.2V4
                                       c0-0.8-0.7-1.5-1.5-1.5S46,3.2,46,4v3.1l-2.2-2.2c-0.6-0.6-1.5-0.6-2.1,0c-0.6,0.6-0.6,1.5,0,2.1l2.2,2.2h-3.1
                                       c-0.8,0-1.5,0.7-1.5,1.5S39.9,12.3,40.7,12.3z"/>
                               </g>
                               </svg>
								<h2 class="card-front__heading">
									Ski trip
								</h2>
								<p class="card-front__text-price">
									From £199
								</p>
							</div>

							<div class="card-front__bt">
								<p class="card-front__text-view card-front__text-view--ski">
									View me
								</p>
							</div>
						</div>

						<div class="card-back">
							<video class="video__container" autoplay muted loop>
								<source class="video__media" src="https://player.vimeo.com/external/195913085.sd.mp4?s=7c12f7a83de62a8900fd2ae049297070b9bc8a54&profile_id=164&oauth2_token_id=574477611" type="video/mp4">
							</video>
						</div>
					</div>
				</div>

				<div class="inside-page">
					<div class="inside-page__container">
						<h3 class="inside-page__heading inside-page__heading--ski">
							For snow lovers
						</h3>
						<p class="inside-page__text">
							Love snow? Why not take up exciting ski-in sessions and hit the slope?
						</p>
						<a href="#" class="inside-page__btn inside-page__btn--ski">View deals</a>
					</div>
				</div>
			</div>
		</section>

		<!-- Card: Beach -->
		<section class="card-section">
			<div class="card">
				<div class="flip-card">
					<div class="flip-card__container">
						<div class="card-front">
							<div class="card-front__tp card-front__tp--beach">
								<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
									 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" class="card-front__icon">
                               <path d="M57.2,28h-7.4c-0.4-4-2-7.7-4.4-10.6l3.2-3.2c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0l-3.2,3.2c-3-2.4-6.6-4-10.6-4.4V2.8
                                   c0-1.1-0.9-2-2-2s-2,0.9-2,2v7.4c-4,0.4-7.7,2-10.6,4.4l-3.2-3.2c-0.8-0.8-2-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8l3.2,3.2
                                   c-2.4,3-4,6.6-4.4,10.6H2.8c-1.1,0-2,0.9-2,2s0.9,2,2,2h7.4c0.4,4,2,7.7,4.4,10.6l-3.2,3.2c-0.8,0.8-0.8,2,0,2.8
                                   c0.4,0.4,0.9,0.6,1.4,0.6s1-0.2,1.4-0.6l3.2-3.2c3,2.4,6.6,4,10.6,4.4v7.4c0,1.1,0.9,2,2,2s2-0.9,2-2v-7.4c4-0.4,7.7-2,10.6-4.4
                                   l3.2,3.2c0.4,0.4,0.9,0.6,1.4,0.6s1-0.2,1.4-0.6c0.8-0.8,0.8-2,0-2.8l-3.2-3.2c2.4-3,4-6.6,4.4-10.6h7.4c1.1,0,2-0.9,2-2
                                   S58.3,28,57.2,28z M30,45.9c-8.8,0-15.9-7.2-15.9-15.9c0-8.8,7.2-15.9,15.9-15.9c8.8,0,15.9,7.2,15.9,15.9
                                   C45.9,38.8,38.8,45.9,30,45.9z"/>
                               </svg>

								<h2 class="card-front__heading">
									Beach time
								</h2>
								<p class="card-front__text-price">
									From £229
								</p>
							</div>

							<div class="card-front__bt">
								<p class="card-front__text-view card-front__text-view--beach">
									View me
								</p>
							</div>
						</div>
						<div class="card-back">
							<video class="video__container" autoplay muted loop>
								<source class="video__media" src="https://player.vimeo.com/external/332588783.sd.mp4?s=cab1817146dd72daa6346a1583cc1ec4d9e677c7&profile_id=139&oauth2_token_id=57447761" type="video/mp4">
							</video>
						</div>
					</div>
				</div>

				<div class="inside-page">
					<div class="inside-page__container">
						<h3 class="inside-page__heading inside-page__heading--beach">
							For sun lovers
						</h3>
						<p class="inside-page__text">
							Relax and get sun-kissed tan in the sea or take up surfting for an adventure!
						</p>
						<a href="#" class="inside-page__btn inside-page__btn--beach">View deals</a>
					</div>
				</div>
			</div>
		</section>

		<!-- Card: Camping -->
		<section class="card-section">
			<div class="card">
				<div class="flip-card">
					<div class="flip-card__container">
						<div class="card-front">
							<div class="card-front__tp card-front__tp--camping">
								<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
									 viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" class="card-front__icon">
                               <path d="M57,52.1c0-0.4-0.1-0.7-0.3-1.1l-6.3-10.8L32.4,9l2.3-4c0.6-1,0.2-2.2-0.7-2.7c-1-0.6-2.2-0.2-2.7,0.7L30,5.2L28.7,3
                                   c-0.6-1-1.8-1.3-2.7-0.7c-1,0.6-1.3,1.8-0.7,2.7l2.3,4l-18,31.1L3.3,51C3.1,51.3,3,51.7,3,52.1c0,0.4,0.1,0.7,0.3,1
                                   c0.4,0.6,1,1,1.7,1h50c0.7,0,1.4-0.4,1.7-1C56.9,52.8,57,52.4,57,52.1z M34.7,49.8C34.2,50,32.1,50,30,50s-4.2,0-4.7-0.2
                                   c-0.2-0.5-0.2-2.1-0.2-3.6l0-4.3c0-2.7,2.2-4.9,4.9-4.9s4.9,2.2,4.9,4.9l0,4.3C34.9,47.7,34.9,49.3,34.7,49.8z M13.1,42.1L28,16.5
                                   v16.7c-3.9,0.9-6.9,4.4-6.9,8.6l0,4.3c0,1.7,0,2.9,0.2,4H8.5L13.1,42.1z M38.7,50.1c0.2-1,0.2-2.3,0.2-4l0-4.3
                                   c0-4.2-2.9-7.7-6.9-8.6V16.5l15,25.7l4.6,7.9H38.7z"/>
                               </svg>
								<h2 class="card-front__heading">
									Camping trek
								</h2>
								<p class="card-front__text-price">
									From £129
								</p>
							</div>

							<div class="card-front__bt">
								<p class="card-front__text-view card-front__text-view--camping">
									View me
								</p>
							</div>
						</div>
						<div class="card-back">
							<video class="video__container" autoplay muted loop>
								<source class="video__media" src="https://player.vimeo.com/external/180185916.sd.mp4?s=c893e4770f87b00e0d6b5a1de138b01b02aaa085&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
							</video>
						</div>
					</div>
				</div>

				<div class="inside-page">
					<div class="inside-page__container">
						<h3 class="inside-page__heading inside-page__heading--camping">
							For nature lovers
						</h3>
						<p class="inside-page__text">
							Get your boots on for some hiking and explore all the beautiful scenery of nature!
						</p>
						<a href="#" class="inside-page__btn inside-page__btn--camping">View deals</a>
					</div>
				</div>
			</div>
		</section>
	</section>
	<footer class="footer">
		<p class="footer-text">&copy; 2021 Created by Maza designDev</p>
	</footer>
</main>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script>
	document.querySelectorAll('.button').forEach(button => {

		let getVar = variable => getComputedStyle(button).getPropertyValue(variable);

		button.addEventListener('click', e => {

			if(!button.classList.contains('active')) {

				button.classList.add('active');

				gsap.to(button, {
					keyframes: [{
						'--left-wing-first-x': 50,
						'--left-wing-first-y': 100,
						'--right-wing-second-x': 50,
						'--right-wing-second-y': 100,
						duration: .2,
						onComplete() {
							gsap.set(button, {
								'--left-wing-first-y': 0,
								'--left-wing-second-x': 40,
								'--left-wing-second-y': 100,
								'--left-wing-third-x': 0,
								'--left-wing-third-y': 100,
								'--left-body-third-x': 40,
								'--right-wing-first-x': 50,
								'--right-wing-first-y': 0,
								'--right-wing-second-x': 60,
								'--right-wing-second-y': 100,
								'--right-wing-third-x': 100,
								'--right-wing-third-y': 100,
								'--right-body-third-x': 60
							})
						}
					}, {
						'--left-wing-third-x': 20,
						'--left-wing-third-y': 90,
						'--left-wing-second-y': 90,
						'--left-body-third-y': 90,
						'--right-wing-third-x': 80,
						'--right-wing-third-y': 90,
						'--right-body-third-y': 90,
						'--right-wing-second-y': 90,
						duration: .2
					}, {
						'--rotate': 50,
						'--left-wing-third-y': 95,
						'--left-wing-third-x': 27,
						'--right-body-third-x': 45,
						'--right-wing-second-x': 45,
						'--right-wing-third-x': 60,
						'--right-wing-third-y': 83,
						duration: .25
					}, {
						'--rotate': 55,
						'--plane-x': -8,
						'--plane-y': 24,
						duration: .2
					}, {
						'--rotate': 40,
						'--plane-x': 45,
						'--plane-y': -180,
						'--plane-opacity': 0,
						duration: .3,
						onComplete() {
							setTimeout(() => {
								button.removeAttribute('style');
								gsap.fromTo(button, {
									opacity: 0,
									y: -8
								}, {
									opacity: 1,
									y: 0,
									clearProps: true,
									duration: .3,
									onComplete() {
										button.classList.remove('active');
									}
								})
							}, 2000)
						}
					}]
				})

				gsap.to(button, {
					keyframes: [{
						'--text-opacity': 0,
						'--border-radius': 0,
						'--left-wing-background': getVar('--primary-darkest'),
						'--right-wing-background': getVar('--primary-darkest'),
						duration: .1
					}, {
						'--left-wing-background': getVar('--primary'),
						'--right-wing-background': getVar('--primary'),
						duration: .1
					}, {
						'--left-body-background': getVar('--primary-dark'),
						'--right-body-background': getVar('--primary-darkest'),
						duration: .4
					}, {
						'--success-opacity': 1,
						'--success-scale': 1,
						duration: .25,
						delay: .25
					}]
				})

			}

		})

	});


</script>
</body>
</html>